#sidebar
  width: 100% !important
  height: 100%
  .sticky
    position: sticky
    top: block-margin
  // @media mq-normal
  //   column(sidebar-column)
  @media mq-tablet
    display: grid
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px

.widget-wrap
  margin-bottom: block-margin

.widget-title
  // @extend $block-caption
  color: var(--widget-title)
  font-size: 20px
  font-weight: bold
  margin-bottom: 12px
  transition: color trans-style
  display: flex
  &:before
    content: ''
    display: block
    height: 14px
    width: 4px
    border-radius: 2px
    background-color: var(--primary)
    margin-right: 10px
    margin-top: 4px
    margin-left: -4px

.widget
  @extend $card
  color: color-sidebar-text
  padding: 20px
  overflow: hidden
  a
    color: var(--link)
    text-decoration: none
    font-size: 16px
  ul, ol, dl
    ul, ol, dl
      margin-left: 15px
      list-style: disc
  .article-tag-list
  .widget-tag-list
    a
      color: var(--btn-content)
      &:hover
        color: var(--btn-content-hover)

.info-card
  @extend .widget
  padding: 0 0 20px
  text-align: center
  .info
    padding: 0 16px
  .avatar
    width: 100%
    border-radius: card-radius
    margin-bottom: 16px
    user-select: none
    overflow: hidden
    display: flex
    position: relative
    img
      width: 100%
    @media mq-tablet and (min-width: 360px)
      width 240px
      margin: 24px auto 16px auto
    @media mq-mobile and (min-width: 360px)
      width 240px
      margin: 24px auto 16px auto

  .username
    font-size: 20px
    font-weight: bold
    color: var(--info-name)
    line-height: 28px
    margin-bottom: 4px
    margin-top: 4px
    transition: color trans-style
  .dot
    width: 20px
    height: 4px
    background: var(--light-dot)
    border-radius: 2px
    margin-left: auto
    margin-right: auto
    margin-bottom: 12px
  .subtitle
    font-size: 16px
    line-height: 24px
    color: var(--info-sub)
    margin-bottom: 8px
    transition: color trans-style
  .link-list
    display: flex
    justify-content: center
    gap: 8px
    flex-wrap: wrap
    .link-btn
      @extend $button
      width: 40px
      height: 40px
      font-size: 24px
